<template>
	<view class="shop-container">
		<!-- 新增的 Tab 切换 -->
		<u-tabs style="text-align: center;" :list="tabs" :current="currentTab" @change="changeTab" />
		<!-- 顶部搜索栏 -->
		<!-- <view class="search-box">
		    <u-search bg-color="#f2f2f2" :focus="false" v-model="keyword" :show-action="true" :animation="true"
		        action-text="搜索" placeholder="搜索商品" @search="doSearch" @custom="doSearch"></u-search>
		</view> -->
		<!-- <view class="position-absolute top-0">
			<u-navbar :background="background" back-icon-color="#000" :border-bottom="false">
				<view
					style="display: flex;align-items: center;justify-content: center;width: 750rpx;position: absolute;left: 0;top: 0;">
					<u-tabs style="text-align: center;" :list="tabs" :current="currentTab" @change="changeTab" />
				</view>
			</u-navbar>
		</view> -->
		<!-- 新增的 Tab 切换 -->
		<view>
			<!-- 顶部搜索栏 -->
			<view class="search-box" style="padding-bottom: 20rpx;">
				<u-search bg-color="#FFFFFF" :focus="false" v-model="keyword" :show-action="true" :animation="true"
					action-text="搜索" placeholder="搜索商品" @search="doSearch" @custom="doSearch"></u-search>
			</view>
			<!-- 分类导航 -->
			<!-- <scroll-view v-if="currentTab === 1" class="category-nav" scroll-x>
            <view v-for="(item, index) in categories" :key="item.id"
                :class="['category-item', currentCategory === item.id ? 'active' : '']" @tap="switchCategory(item.id)">
                {{ item.name }}
            </view>
        </scroll-view> -->

			<!-- 商品列表 -->
			<scroll-view class="goods-list" scroll-y @scrolltolower="nextPage" refresher-enabled
				:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" refresher-background="#f5f5f5">
				<view class="goods-grid">
					<view class="goods-item" v-for="(item, index) in goodsList" :key="index"
						@click="goNav('/me/shop/info?productId=' + item.id)">
						<view class="goods-type-tag">{{ item.classify === 1 ? '工具' : '商品' }}</view>
						<image :src="item.titleImg" mode="aspectFill" class="goods-image"></image>
						<view class="goods-info">
							<view class="goods-tag" v-if="item.tag">{{ item.tag }}</view>
							<view class="goods-title">{{ item.title }}</view>
							<view class="goods-bottom">
								<view class="goods-price">
									<text class="symbol">¥</text>
									<text class="price">{{ item.goodsPrice }}</text>
								</view>
								<view class="publish-time">库存{{ item.endNum }}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 无数据提示 -->
				<u-loadmore v-if="goodsList.length > 0" :status="status" />
				<empty title="暂无商品" :isShow='false' v-if="goodsList.length == 0"></empty>
			</scroll-view>
			<!-- 右下角悬浮按钮 -->
			<view class="float-btn" @click="goToMyOrders">
				<!-- <u-icon name="order" size="22" color="#fff"></u-icon>
            <text>我的订单</text> -->
				<image src='/static/images/index/order.png'></image>
			</view>

		</view>

	</view>

</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},

		data() {
			return {
				// 新增的 Tab 数据
				tabs: [{
						name: '工具'
					},
					{
						name: '商品'
					}
				],
				currentTab: 0, // 当前选中的 Tab
				status: 'loadmore',
				keyword: '',
				currentCategory: 0,
				categories: [],
				page: 1,
				pages: 1,
				limit: 10,
				goodsList: [],
				scrollTop: 0,
				oldScrollTop: 0,
				isRefreshing: false,
				background: {
					backgroundColor: '#fff'
				},
			}
		},
		computed: {

		},
		onLoad() {
			this.getGoodsTypeList()
			this.getProductList()
		},
		onShow() {
			this.getProductList()
		},
		methods: {
			changeTab(index) {
				this.currentTab = index;
				console.log('changeTab_=', this.currentTab);
				// 根据选中的 Tab 更新商品列表
				this.getProductList();
			},
			// 新增跳转到我的订单页面方法
			goToMyOrders() {
				this.$navTo('/me/shop/order/index')
			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			},
			getGoodsTypeList() {
				this.categories = [{
					id: 0,
					name: '全部'
				}]
				this.$Request.getT('/app/shop/getProductTypeList').then(res => {
					this.categories = this.categories.concat(res.data)
				})
			},
			getProductList() {
				this.$Request.getT('/app/shop/getProductInfoPage', {
					page: this.page,
					limit: this.limit,
					typeId: this.currentCategory,
					title: this.keyword,
					classifyTYpe: this.currentTab
				}).then(res => {
					if (res.code === 0) {
						this.pages = res.data.pages
						if (this.page < this.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
						if (this.page === 1) {
							this.goodsList = res.data.records
						} else {
							this.goodsList = [...this.goodsList, ...res.data.records]
						}
					} else {
						uni.stopPullDownRefresh();
					}
				})
			},
			switchCategory(id) {
				this.currentCategory = id
				this.page = 1
				this.goodsList = []
				console.log('切换到分类:', id)
				this.getProductList()
			},
			doSearch() {
				// 执行搜索，这里使用计算属性自动过滤
				console.log('搜索关键词:', this.keyword)
				this.getProductList()
			},
			nextPage() {
				console.log('下一页>>>>>>')
				if (this.page < this.pages) {
					this.page += 1
					this.status = 'loading'
					this.getProductList()

				} else {
					this.status = 'nomore'
				}
			},
			onReachBottom: function() {
				console.log('onReachBottom>>>>>>>')
				if (this.page < this.pages) {
					this.page += 1
					this.status = 'loading'
					this.getProductList()

				} else {
					this.status = 'nomore'
				}

			},
			// 新增：下拉刷新方法
			async onRefresh() {
				if (this.isRefreshing) return

				this.isRefreshing = true

				// 重置页码和加载状态
				this.page = 1
				this.status = 'loadmore'

				// 模拟刷新延迟
				await new Promise(resolve => setTimeout(resolve, 1000))

				// 重新加载第一页数据
				await this.getProductList()

				// 结束刷新状态
				this.isRefreshing = false
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})

				// 实际接口调用可以参考上面 onLoad 方法中注释的代码
			},
		}

	}
</script>


<style>
	page {
		background: #F7F8FF;
	}
</style>
<style lang="scss" scoped>
	/* 新增 Tab 样式 */
	.u-tabs {
		margin-bottom: 1px; // Tab 和搜索框之间的间距
	}

	// 新增悬浮按钮样式
	.float-btn {
		position: fixed;
		right: 30rpx;

		z-index: 99;

		bottom: 100rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}


	.shop-container {
		min-height: 100vh;

	}

	/* 顶部导航栏样式 */
	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #fff;
		padding: 0 20rpx;
		position: relative;
	}

	.back-icon {
		padding: 20rpx;
	}

	.title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32rpx;
		font-weight: bold;
	}

	/* 搜索栏样式 */
	.search-box {
		padding: 10rpx 10rpx;
	}

	/* 分类导航样式 */
	.category-nav {
		background-color: #fff;
		white-space: nowrap;
		padding: 20rpx 0;
	}

	.category-item {
		display: inline-block;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #666;
	}

	.category-item.active {
		color: #000;
		font-weight: bold;
		position: relative;
	}

	.category-item.active::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #ff6b6b;
	}

	/* 商品列表样式 */
	.goods-list {
		height: calc(100vh - 280rpx);

	}

	/* 其他商品相关样式保持不变... */
	.goods-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods-item {
		width: 49%;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.goods-image {
		width: 100%;
		height: 320rpx;
	}

	.goods-info {
		padding: 20rpx;
	}

	.goods-tag {
		display: inline-block;
		font-size: 24rpx;
		color: #ff6b6b;
		border: 1rpx solid #ff6b6b;
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		margin-bottom: 10rpx;
	}

	.goods-title {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100%;
		line-height: 40rpx;
	}

	.goods-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.goods-price {
		color: #ff6b6b;
	}

	.symbol {
		font-size: 24rpx;
	}

	.price {
		font-size: 32rpx;
		font-weight: bold;
	}

	.discount {
		font-size: 24rpx;
		color: #999;
		margin-left: 10rpx;
	}

	.publish-time {
		font-size: 24rpx;
		color: #999;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.user-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.user-name {
		font-size: 24rpx;
		color: #666;
	}

	.want-count {
		font-size: 24rpx;
		color: #999;
		margin-left: auto;
	}

	/* flex 工具类 */
	.flex {
		display: flex;
	}

	.justify-center {
		justify-content: center;
	}

	.align-center {
		align-items: center;
	}

	/* 添加空数据提示样式 */
	.empty-tip {
		text-align: center;
		padding: 60rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	// 新增商品类型标签样式
	.goods-type-tag {
		position: absolute;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 4rpx 16rpx;
		font-size: 24rpx;
		border-bottom-left-radius: 12rpx;
		z-index: 1;
	}
</style>